<template>
   <div>
     <div class="header">
        <Myhead headName="栏目管理" @tojemp="toBack"/>
     </div>
     <div class="channel-bd">
         <h5>点击删除以下频道</h5>
         <div class="channel">
            <div class="channel-item" v-for="(item,index) in channelNameList" :key="index" :class="item.is_top == 1 ? 'col_pink':''" @click="delChannel(index)">{{item.name}}</div>
         </div>
     </div>
     <div class="channel-bd">
         <h5>点击添加以下频道</h5>
         <div class="channel">
            <div class="channel-item" v-for="(item,index) in disableChannelNameList" :key="index" :class="item.is_top == 1 ? 'col_pink':''" @click="addChannel(index)">{{item.name}}</div>
         </div>
     </div>
   </div>
</template>

<script>
import Myhead from '../../components/MyHeader'
export default {
    data(){
       return{
           channelNameList:[],
           disableChannelNameList:[]
       }
    },
    components:{
        Myhead
    },
    watch:{
        channelNameList(){
            localStorage.setItem('channelNameList',JSON.stringify(this.channelNameList));
        },
        disableChannelNameList(){
            localStorage.setItem('disableChannelNameList',JSON.stringify(this.disableChannelNameList));
        }
    },
    methods:{
        toBack(){
            this.$router.back();
        },
        getList(){
            this.$axios({
                url:'/category',
                methods:'get'
            }).then((res)=>{
                this.channelNameList = res.data.data;
            });
        },
        delChannel(index){
            if(this.channelNameList.length > 1){
                this.disableChannelNameList.push(this.channelNameList[index]);
                this.channelNameList.splice(index,1);
            }
        },
        addChannel(index){
            this.channelNameList.push(this.disableChannelNameList[index]);
            this.disableChannelNameList.splice(index,1);
        }
    },
    mounted(){
        if(!localStorage['channelNameList'] || !localStorage['disableChannelNameList']){
            this.getList();
        }else{
            this.channelNameList = JSON.parse(localStorage.getItem('channelNameList'));
            this.disableChannelNameList = JSON.parse(localStorage.getItem('disableChannelNameList'));
        }
    }
}
</script>

<style lang="less" scoped>
.channel-bd{
    padding:0 6.111vw;//22
    margin-bottom: 5.556vw;
    h5{
        padding:1.389vw 0;
        font-size: 3.333vw;
        color: #716E6E;
        font-weight: 400;
        text-indent: 8px;
        background-color: #F5F5F5;
        //background-color: #ffc0cb;
    }
    .channel{
        display: flex;
        flex-direction: row;
        justify-content:flex-start;
        flex-wrap: wrap;
        margin-top: 2.778vw;
        .channel-item{
            width: 18.333vw;
            height: 9.444vw;
            text-align: center;
            line-height: 9.444vw;
            font-size: 4.444vw;
            color:#212121;
            border:1px solid #DCDCDC;
            //margin-bottom: 2.222vw;
            margin: 0 3.889vw 2.222vw 0;
            &:nth-child(4n){
                margin-right: 0;
            }

        }
    }
}
.col_pink{
    border: 1px solid #ffc0cb !important;
    color:#ffc0cb !important;
}
</style>